{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <!-- <div class="row">
                 <div class="col-md-12"> -->
            <div class="row">
                <div class="col-md-7">
                    <div class="card bor" style="height: calc( 100% - 30px ) ;">
                        <div class="card-dth">
                            <div class="user">
                                <div class="user-name">市场需求数据</div>
                                <!-- <div class="u-rig">
                                     <div class="u-left">
                                         <div class="bg-txt">
                                             <text class="k"></text>
                                             <text class="str">社群总数</text>
                                         </div>
                                         <div class="bg-str">
                                             100
                                         </div>
                                     </div>
                                     <div class="u-left">
                                             <div class="bg-txt">
                                             <text class="h"></text>
                                                 <text class="str">当月新增数量</text>
                                             </div>
                                             <div class="bg-str">
                                                200
                                             </div>
                                     </div>
                                 </div> -->
                            </div>
                            <canvas id="marketData"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-md-5">
                    <div class="card bor">
                        <div class="card-dth">
                            <div class="user-name" style="text-align: left;margin-bottom: 56px;">
                                交易数据
                            </div>
                            <div class="d-cnter">
                                <div class="item">
                                    <canvas id="checkApproval" width="170" height="170"></canvas>
                                    <p class="amount" style="color: #576AFBFF;">{$demand_data.countDemand}</p>
                                    <div>
                                        需求总数
                                    </div>
                                    <p>&nbsp;</p>
                                </div>
                                <div class="item">
                                    <canvas id="checkReject" width="170" height="170"></canvas>
                                    <p class="amount" style="color: #FF6739FF;">{$trade_data.buyDemand}</p>
                                    <div>
                                        交易中
                                    </div>
                                    <p>占所有需求的{$trade_data.buyDemandScale}</p>
                                </div>
                                <div class="item">
                                    <canvas id="checkUnreviewed" width="170" height="170"></canvas>
                                    <p class="amount" style="color: #00A0FFFF;">{$trade_data.sellDemand}</p>
                                    <div>
                                        已卖出
                                    </div>
                                    <p>占所有需求的{$trade_data.sellDemandScale}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

            <!--   </div>
           </div> -->

            <div class="list">
                <div class="list-title">
                    <div class="item activeBtn" onclick="add()">✚ 发布</div>
                    <div class="item additem {if input('type',1) == 1}activeBtn{/if}" onclick="changeList(1,this)">交易中
                    </div>
                    <div class="item additem {if input('type',1) == 2}activeBtn{/if}" onclick="changeList(2,this)">已卖出
                    </div>
                    <div class="item additem {if input('type',1) == 3}activeBtn{/if}" onclick="changeList(3,this)">待完善
                    </div>
                    <!--					<div class="positionBox" style="color: #5C5F66FF;cursor: pointer;" >-->
                    <!--						全部-->
                    <!--						<div class="pullDown" onclick="selectClick()"></div>-->
                    <!--					    <div class="select">-->
                    <!--							<div class="selectItem">已审核通过</div>-->
                    <!--							<div class="selectItem">已驳回</div>-->
                    <!--							<div class="selectItem">待审核</div>-->
                    <!--						</div>-->
                    <!--					</div>-->
                    <div class="action-right" style="margin-left: 0.5rem;">
                        <div class="input-group">
                            <input type="text" name="keywords" id="keywords" autofocus="autofocus"
                                   value="{$Request.get.keywords}" class="form-control"
                                   placeholder="名称|编号|城市|标签"
                                   aria-describedby="button-addon1" types="{$type}">
                            <div class="input-group-append">
                                <button class="btn btn-outline-light" type="submit" id="button-addon1">
                                    <i data-feather="search"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script type="text/html" id="barDemo">
    <div class="appends">

    </div>
    <!--    <button onclick="edit" class="btn btn-sm btn-outline-secondary">编辑</button><br>-->
    <!--    <button lay-event="del" class="btn btn-sm btn-outline-secondary">删除</button>-->

</script>
<script>
    // 添加
    function add() {
        window.location.href = '{:url("/demand/demandAdd")}';
    }

    // 编辑
    function edit(id) {
        window.location.href = '{:url("/demand/demandEdit")}?id=' + id;
    }

    // 详情
    function see(id) {
        window.location.href = '{:url("/demand/demandShow")}?id=' + id;
    }

    // 删除
    function del(id) {
        layer.confirm('删除该数据?', {icon: 3, title: '提示'}, function (index) {
            $.post("{:url('/demand/changeStatus')}", {id: id, source: 2}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });
            layer.close(index);
        });
    }

    //切换
    function changeList(t, e) {
        $('.list-title .additem').removeClass('activeBtn');
        $(e).addClass('activeBtn');
        type = t;
        keyword = '';
        var ele = $('input[name=keywords]');
        ele.val('');
        // 交易中
        initcommList(type);
        window.history.replaceState(null, null, './index.html?type=' + type);
    }

    // 初始请求
    var uri = window.location.search.split('=')[1];
    console.log(uri);
    var type = uri ? uri : 1;
    console.log(type);
    var keyword = '';
    var layer = '';
    layui.use('layer', function () {
        layer = layui.layer;
    });
    //获取社群列表
    initcommList(type);

    function initcommList(t, k) {
        // layui插件
        layui.use('table', function () {
            //类型
            var titles1 = '序号/编号';
            var titles2 = '创建时间/访问次数';
            if (t == 2) {
                titles1 = '序号/编号/订单号';
                titles2 = '创建时间/卖出时间/访问次数';
            }
            var cols = [
                {field: 'name_data', title: 'LOGO/名称/标签'}
                , {field: 'users_data', title: '昵称'}
                , {field: 'ids', title: titles1}
                , {field: 'company_data', title: '人数/城市'}
                , {field: 'create_data', title: titles2}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
            ];

            // 待完善
            if (t == 3) {
                cols = [
                    {field: 'id', title: '序号'}
                    , {field: 'name', title: '社群名称'}
                    , {field: 'label', title: '标签'}
                    , {field: 'city_name', title: '城市'}
                    , {field: 'create_time', title: '创建时间'}
                    , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
                ];
            }

            var table = layui.table
                , form = layui.form;
            // 表格初始化
            table.render({
                elem: '#linkstable'
                , skin: 'line' //行边框风格
                , even: true //开启隔行背景
                , url: '{:url("/demand/index")}'
                , method: 'post'
                , where: {type: t, keywords: k}
                , page: true //开启分页
                , cols: [cols],
                done: function (res) {
                    var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                    element.css('overflow', 'visible');
                    element.children('.dropdown-menu').css('min-width', 'auto');

                    console.log(res)
                    var html = '';
                    $.each(res.data, function (key, value) {
                        // 1=>交易中  3=>待完善
                        if (res.type == 1 || res.type == 3) {

                            html += '' +
                                '<button class="btn btn-sm btn-outline-secondary" onclick="edit(' + value.id + ')">编辑</button><br>\n';

                            // 已卖出
                        } else {
                            var text = '审核中';
                            var color = 'orange';
                            if (value.status == 3) {
                                text = '已完成';
                                color = '#39de39';
                            }
                            html += '' +
                                '<p>状态：<span style="color:' + color + '">' + text + '</span></p><button class="btn btn-sm btn-outline-secondary" onclick="see(' + value.id + ')">详情</button><br>\n';
                        }

                        html += '' +
                            '<button class="btn btn-sm btn-outline-secondary" onclick="del(' + value.id + ')">删除</button>';

                        // 节点渲染
                        $($('.layui-table-cell .appends')[key]).html(html);

                        // 重置
                        html = '';
                    });
                },
                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.count,
                        "data": res.data.list,
                        "type": res.data.type
                    };
                }
            });

            // 搜索
            $('#button-addon1').on('click', function () {
                var keywords = $("#keywords").val();
                var types = $("#keywords").attr('types');
                table.reload('linkstable', {
                    url: "{:url('/demand/index')}"
                    , where: {
                        keywords: keywords, type: types// 搜索参数
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            });
        });
    }


    function selectClick() {
        console.log($('.select').css('display'));
        if ($('.select').css('display') === 'none') {
            $('.select').css('display', 'flex')
        } else {
            $('.select').css('display', 'none')
        }

    }


    // 市场需求数据
    var chartDom1 = document.getElementById('marketData');
    var resizeMyChartContainer = function () {
        let domWidth = $('.card-dth').width();
        console.log(domWidth);
        chartDom1.style.width = domWidth + 'px'
        chartDom1.style.height = (domWidth / 2) - 70 + 'px'
    }
    resizeMyChartContainer()

    let demandLabels = "{$demand_data.demandMonthLine.labels}";
    let demandDatas = "{$demand_data.demandMonthLine.datas}";
    let dataDay = demandLabels.split(',');
    let dataValue = demandDatas.split(',');
    var myChart1 = echarts.init(chartDom1);
    var option;
    option = {
        title: {
            // text: '堆叠区域图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['需求总数\n{c|{$demand_data.countDemand}}', '当月新增\n{c|{$demand_data.countDemandMonth}}', '当日新增\n{c|{$demand_data.todayDemand}}',],
            left: '50%',
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 12,
            align: 'left',
            itemGap: 30,
            textStyle: {
                rich: {
                    a: {
                        color: '#2F3133FF',
                        lineHeight: 20,
                    },
                    b: {
                        fontSize: 16
                    },
                    c: {
                        fontSize: 20,
                        color: '#000000FF',
                        lineHeight: 30,
                    }
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data: dataDay,
                gridLines: {
                    display: false
                },
                //y轴刻度
                axisTick: {show: false},
                //y轴刻度标签数字
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#8557C3FF'  //y轴标签颜色
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '需求总数\n{c|{$demand_data.countDemand}}',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#406CE5FF'
                    }
                },
                areaStyle: {
                    normal: {color: '#F2FBFFFF',}//改变区域颜色
                },
                data: dataValue
            },
            {
                name: '当月新增\n{c|{$demand_data.countDemandMonth}}',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                itemStyle: {
                    normal: {
                        color: '#FF00FFFF'
                    }
                },
                areaStyle: {
                    normal: {color: '#F9F6FFFF',}//改变区域颜色
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '当日新增\n{c|{$demand_data.todayDemand}}',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                itemStyle: {
                    normal: {
                        color: '#E6A500FF'
                    }
                },
                areaStyle: {
                    normal: {color: '#F9F6FFFF',}//改变区域颜色
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
            },

        ]
    };

    option && myChart1.setOption(option);
    myChart1.resize();
    window.onresize = function () {
        resizeMyChartContainer()
        myChart1.resize();
    }


    // 需求总数
    var chartDom = document.getElementById('checkApproval');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: '22%',
                top: '45%',
                style: {
                    //value当前进度
                    text: "需求总数",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                {value: "{$demand_data.countDemand}"},
            ]
        }]
    };
    myChart.setOption(option);

    // 交易中
    var chartDom = document.getElementById('checkReject');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$trade_data.buyDemandScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$trade_data.buyLastDemand}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$trade_data.buyDemand}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#ff4438FF'},
                                    {offset: 1, color: '#ffa13bFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);

    // 已售出
    var chartDom = document.getElementById('checkUnreviewed');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '45%',
                style: {
                    //value当前进度
                    text: "{$trade_data.sellDemandScale}",
                    textAlign: 'center',
                    fill: '#000',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
        ],
        series: [{
            type: 'pie',
            radius: ['61%', '53%'],//['外圆大小', '内圆大小']
            center: ['48%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$trade_data.sellLastDemand}",
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                },
                //value当前进度 + 颜色
                {
                    value: "{$trade_data.sellDemand}",
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#322ffdFF'},
                                    {offset: 1, color: '#00c7ffFF'}
                                ])
                        }
                    }
                },
            ]
        }]
    };
    myChart.setOption(option);
</script>
<style>
    .select {
        display: flex;
        display: none;
        position: absolute;
        left: -280%;
        top: 155%;
        z-index: 99;
        background-color: #fff;
        height: 92px;
        width: 137px;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        color: #666666FF;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1)
    }

    .selectItem {
        font-size: 16px;
    }

    .positionBox {
        position: relative;
    }

    .positionBox .pullDown {
        position: absolute;
        right: -76%;
        top: 115%;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .pullDown:before, .pullDown:after {
        position: absolute;
        content: '';
        border-top: 7px transparent dashed;
        border-left: 7px transparent dashed;
        border-right: 7px transparent dashed;
        border-bottom: 7px #fff solid;
    }

    .pullDown:before {
        border-bottom: 7px #5C5F66FF solid;
    }

    .pullDown:after {
        top: 2px;
        border-bottom: 7px #fff solid;
    }


    .activeBtn {
        color: #fff !important;
        background-color: #3F6EFFFF !important;
    }

    .list-title {
        display: flex;
        align-items: center;
        position: relative;
    }

    .list-title .item {
        font-size: 14px;
        border-radius: 3px;
        background-color: #F0F0F0FF;
        color: #999999FF;
        display: grid;
        place-items: center;
        margin-right: 45px;
        cursor: pointer;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;

    }

    .list-title .item:nth-child(1) {
        border: 1px solid #3F6EFFFF;
        color: #3F6EFFFF;
        background-color: #fff;
    }

    .d-cnter {
        display: flex;
        flex-wrap: wrap;
    }

    .d-cnter .item {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
        font-size: 18px;
        margin-top: 0.5px;
    }

    .d-cnter .item div {
        color: #2E3033FF;
    }

    .d-cnter .item p {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 17px;
        margin-top: 9px;
    }

    .d-cnter .item p:nth-last-child(1) {
        color: #999999FF;
        font-size: 16px;
        font-weight: 100;
    }

    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }

    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }

    .sel-mat-top {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .avt {
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }

    .sel-bottom {
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sel-bottom:active {
        background: #3377FF;
    }

    .card-dth {
        padding: 8px;
        width: 100%;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;

    }

    .bg-txt {
        display: flex;
        margin-top: 5px;
    }


    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }


    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        padding-bottom: 20px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }

    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .txt-cen {
        text-align: center;
    }

    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }

    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }

    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }

    .d-th {
        padding-left: 10px;
        text-align: center;
    }

    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }

    .t {
        color: #576AFB;
    }

    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }

    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }

    .b {
        color: #FF6739;
    }

    .w {
        color: #00A0FF;
    }

    .keword {
        display: flex;
    }

    .key-input {
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }

    .key-bottom {
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor: pointer
    }

    .key-bottom:active {
        background: #71a2d8;
    }
</style>
</body>
</html>
